<template>
	<div class="public-table-container">
		<!-- 表格上面搜索栏或者按钮的默认插槽   -->
		<div class="buttons-wrap">
			<slot></slot>
		</div>
    <!-- 表格顶部添加 -->
    <div class="table-top">
      <slot name="topContent"></slot>
    </div>
		<!-- 表格内容  -->
		<div class="table-content">
			<el-table
				style="width: 100%; height: 100%"
				:class="[
					radio ? 'radio-table' : '',
					disabledSelectAll ? 'radio-table' : '',
				]"
				:scrollbar-always-on="true"
				ref="tableRef"
				:data="tableData"
				@cell-click="cellClick"
				@selection-change="handleSelectionChange"
				:border="border"
				:row-style="rowStyles"
				:cell-style="cellStyle"
				@select="selectClick"
				:header-cell-style="headerCellStyle"
				:row-key="rowKey"
				:tree-props="treeProps"
				:span-method="objectSpanMethod"
				:height="height"
			>
				<el-table-column
					v-if="selection"
					type="selection"
					:selectable="selectable"
				>
				</el-table-column>
				<el-table-column v-if="radio" type="selection" label="单选">
				</el-table-column>
				<el-table-column
					v-if="index"
					type="index"
					label="序号"
					align="center"
					:width="indexWidth"
				>
					<template #default="scope">
						<span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
					</template>
				</el-table-column>
				<template v-for="(item, index) in tableOption" :key="index">
					<el-table-column
						:prop="item.prop"
						:label="item.label"
						:align="item.align || 'left'"
						:width="item.width || ''"
						:min-width="item.minWidth || ''"
						:show-overflow-tooltip="get_overHidden(item.overHidden)"
						:render-header="item.renderHeaderMethod || null"
						:fixed="item.fixed || false"
						:sortable="item.sortable || false"
						:class-name="item.fixed ? 'menu-float-right' : ''"
					>
						<template #default="scope">
							<!--
                用于展示输入框的插槽
                需要时，父组件给 tableOption 中的项设置 slot:true 启用，
                插槽名称可设置 slotName:"xxx",否则使用 column 的 property 或 prop 属性
              -->
							<slot
								v-if="item.slot"
								:name="
									item.slotName || scope.column.property || scope.column.prop
								"
								:row="scope.row"
								:$index="scope.$index"
							/>
							<!-- 需要时，通过在父组件给 tableOption 的项设置 type：'image' 来预览图片-单张 -->
							<el-image
								v-else-if="item.type === 'image'"
								fit="contain"
								:preview-src-list="[getUrl(scope.row[item.prop])]"
								class="img-box"
								:src="getUrl(scope.row[item.prop])"
							></el-image>
							<!-- 需要时，通过在父组件给 tableOption 的项设置 type：'images' 来预览图片-多张 -->
							<template v-else-if="item.type === 'images'">
								<template
									v-if="
										typeof scope.row[item.prop] === 'object' &&
										scope.row[item.prop].length > 0
									"
								>
									<el-image
										fit="contain"
										v-for="(url, index) in scope.row[item.prop]"
										:key="index"
										:preview-src-list="getUrls(scope.row[item.prop])"
										class="img-box"
										:src="getUrl(url)"
									></el-image>
								</template>
								<template v-else>
									<span>-</span>
								</template>
							</template>
							<!-- 需要时，通过在父组件给 tableOption 的项设置 formatter，用于对列中特殊格式的数据进行格式转换 -->
							<span
								v-else
								v-html="
									item.formatter
										? item.formatter(
												scope.row[scope.column.property],
												scope.row
										  )
										: scope.row[scope.column.property] === 0
										? '0'
										: scope.row[scope.column.property] || '-'
								"
							></span>
						</template>
					</el-table-column>
				</template>
				<!-- 需要时，
          1.为组件设置 operation='true' 启用;
          2.在组件中设置名为 <template #menu="scope"></template> 的插槽;
          3.在组件中设置名为 operationAlign="left" 可控制对其方式;
          4.在组件中设置名为 operationfixed="right" 可控制固定位置;
        -->
				<el-table-column
					v-if="operation"
					label="操作"
					:align="operationAlign"
					:width="operationWidth + 'px'"
					:fixed="operationfixed"
				>
					<template #default="scope">
						<slot name="menu" :row="scope.row" :$index="scope.$index" />
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页   -->
		<div class="pagination-warp">
			<Pagination
				class="pagination"
				v-show="isPaging"
				:total="page.total"
				:page="page.current"
				:limit="page.size"
				:pageSizes="[20, 30, 40, 50, 100, 150, 200]"
				@pagination="pageChange"
			/>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import Pagination from "../components/Pagination";
const props = defineProps({
	headerCellStyle: {
		type: Object,
		default: {},
	},
	selection: {
		// 是否显示多选
		type: Boolean,
		default: false,
	},
	disabledSelectAll: {
		// 是否显示多选
		type: Boolean,
		default: false,
	},
	radio: {
		type: Boolean,
		default: false,
	},
	isPaging: {
		// 是否分页
		type: Boolean,
		default: true,
	},
	index: {
		// 是否设置序号，默认设置
		type: Boolean,
		default: true,
	},
	indexWidth: {
		// 序号列宽
		type: String,
		default: "55",
	},
	border: {
		// 是否设置边框，默认不要
		type: Boolean,
		default: function () {
			return false;
		},
	},
	operation: {
		// 是否有操作列，默认无
		type: Boolean,
		default: function () {
			return false;
		},
	},
	operationAlign: {
		// 操作列对齐方式，默认 center
		type: String,
		default: "center",
	},
	operationWidth: {
		// 操作列宽度，默认 130px
		type: Number,
		default: 130,
	},
	operationfixed: {
		type: [String , Boolean],
		// 操作列固定方式，默认 center
		default: function () {
			return false;
		},
	},
	tableData: {
		// 列表数据
		type: Array,
		default: function () {
			return [];
		},
	},
	tableOption: {
		// 表头
		type: Array,
		default: function () {
			return [];
		},
	},
	page: {
		// 分页
		type: Object,
		default: function () {
			return {
				total: 0,
				current: 1,
				page: 10,
			};
		},
	},
	rowStyles: {
		type: Function,
		default: () => {
			return () => {};
		},
	},
	cellStyle: {
		type: Object,
		default: () => {
			return {};
		},
	},
	treeProps: Object,
	rowKey: {
		type: String,
		default: "id",
	},
	objectSpanMethod: {
		type: Function,
		default: () => {},
	},
	height:{
		type:String,
		default:'auto'
	}
});

const get_overHidden = (value) => {
	if (value === undefined || value === "" || value === true) {
		return true;
	}
	return false;
};

const emits = defineEmits([
	"cell-click",
	"page-change",
	"handleSelectionChange",
	"selectClick",
]);

const cellClick = (row, column, cell, event) => {
	emits("cell-click", { row, column, cell, event });
};

const handleSelectionChange = (e) => {
	emits("handleSelectionChange", e);
};

const pageChange = (e) => {
	emits("page-change", e);
};

const tableRef = ref(null);

//点击选择框时触发
const selectClick = (selection, row) => {
	if (props.radio) {
		// 如果是单选按钮时,该代码生效
		if (selection.length > 1) {
			let del_row = selection.shift();
			tableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		}
	}
	emits("selectClick", row);
};

// 拼接图片服务器地址
const getUrl = (url) => {
	/* const pat=/http/g;
  if (pat.test(url)){
    return url;
  }else {
    return process.env.VUE_APP_FILE_ADDRESS_API + url;
  }*/
	return url;
};

const getUrls = (urls) => {
	if (typeof urls === "object" && urls.length > 0) {
		return urls.forEach((item) => {
			item = getUrl(item);
		});
	}
	return urls;
};

const clearSelection = () => {
	tableRef.value.clearSelection();
};

const selectable = (row, index) => {
	if (row.disabled) {
		return false;
	} else {
		return true;
	}
};

const toggleRowSelection = (row, bool) => {
	tableRef.value.toggleRowSelection(row, bool);
};

defineExpose({
	toggleRowSelection,
	clearSelection,
});
</script>

<style lang="scss" scoped>
// 隐藏全选按钮
:deep(.radio-table th.el-table__cell:nth-child(1) .cell) {
	visibility: hidden;
}
.public-table-container {
	.pagination-warp {
		margin-top: 10px;
	}
}
</style>
